<link rel="stylesheet" href="../js/lay-module/ipInput/ipInput.css">
<style>
    .layuimini-main {
        display: flex;
        flex-wrap: wrap;
        height: 100%;
    }
    
    .layuimini-main>div {
        flex: 1;
        margin-right: 25px;
    }
    
    .ip-change-radio>div {
        margin: 0;
        padding: 10px 20px 5px 23px;
        color: #6b6b6b;
    }
    
    .layui-form fieldset {
        width: 85%;
    }
    
    .layuimini-main fieldset[disabled="disabled"] .layui-form-item {
        color: #c5c5c5;
    }
    
    .layuimini-main fieldset[disabled="disabled"] .layui-form-item input {
        -webkit-text-fill-color: #c5c5c5;
        border-color: #c5c5c5;
        cursor: no-drop;
    }
    
    .layuimini-main>div>fieldset legend {
        font-size: 20px;
        color: #454545;
        font-weight: 300;
    }
    
    .mac-input {
        height: 32px;
        line-height: 32px;
        border-color: #cccccc !important;
        width: 250px;
    }
</style>

<div class="layuimini-container layuimini-page-anim" style="height: calc(100% - 30px);">
    <div class="layuimini-main">
        <div>
            <fieldset class="table-search-fieldset" style="margin-top: 20px;">
                <legend>以太网配置（Ethernet 0）</legend>
                <form class="layui-form" action="" value="ethernet0" onsubmit="return false">
                    <div class="layui-form-item">
                        <label class="layui-form-label">生成内容框</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="configopt" autocomplete="off" value="eth0">
                            <textarea type="text" name="configstr" autocomplete="off" cols=84 rows=4></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block ip-change-radio">
                            <input type="radio" name="interest" value="1" lay-filter="interest" title="使用动态IP地址">
                            <fieldset class="table-search-fieldset ethernet0">
                                <legend> <input type="radio" name="interest" value="2" lay-filter="interest" title="静态IP地址" checked></legend>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">MAC地址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="mac" lay-verify="mac" autocomplete="off" placeholder="" class="layui-input mac-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">IP地址</label>
                                    <div class="layui-input-block">
                                        <!-- <input type="text" name="ip" lay-verify="ip" autocomplete="off" placeholder="请输入IP地址" class="layui-input"> -->
                                        <div id="ip"></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">子网掩码</label>
                                    <div class="layui-input-block">
                                        <!-- <input type="text" name="netmask" lay-verify="netmask" autocomplete="off" placeholder="请子网掩码" class="layui-input"> -->
                                        <div id="netmask"></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">网关地址</label>
                                    <div class="layui-input-block">
                                        <!-- <input type="text" name="gateway" lay-verify="gateway" autocomplete="off" placeholder="请输入网关地址" class="layui-input"> -->
                                        <div id="gateway"></div>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">DNS地址</label>
                                    <div class="layui-input-block">
                                        <!-- <input type="text" name="nameserver" lay-verify="title" autocomplete="off" placeholder="请DNS地址" class="layui-input"> -->
                                        <div id="nameserver"></div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn input-disa-y" lay-submit lay-filter="saveSetting">保存设置</button>
                            <button type="reset" lay-event="reset" class="layui-btn layui-btn-primary">恢复默认</button>
                        </div>
                    </div>
                </form>
            </fieldset>
        </div>
        <div>
            <fieldset class="table-search-fieldset" style="margin-top: 20px;">
                <legend>以太网配置（Ethernet 1）</legend>
                <form class="layui-form" action="" value="ethernet1">
                    <div class="layui-form-item">
                        <label class="layui-form-label">生成内容框</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="configopt" autocomplete="off" value="eth1">
                            <textarea type="text" name="configstr" autocomplete="off" cols=84 rows=4></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block ip-change-radio">
                            <input type="radio" name="interest" value="1" lay-filter="interest" title="使用动态IP地址">
                            <fieldset class="table-search-fieldset ethernet0">
                                <legend> <input type="radio" name="interest" value="2" lay-filter="interest" title="静态IP地址" checked></legend>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">MAC地址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="mac" lay-verify="mac" autocomplete="off" placeholder="" class="layui-input mac-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">IP地址</label>
                                    <div class="layui-input-block">
                                        <!-- <input type="text" name="ip" lay-verify="ip" autocomplete="off" placeholder="请输入IP地址" class="layui-input"> -->
                                        <div id="ipL"></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">子网掩码</label>
                                    <div class="layui-input-block">
                                        <!-- <input type="text" name="netmask" lay-verify="netmask" autocomplete="off" placeholder="请子网掩码" class="layui-input"> -->
                                        <div id="netmaskL"></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">网关地址</label>
                                    <div class="layui-input-block">
                                        <!-- <input type="text" name="gateway" lay-verify="gateway" autocomplete="off" placeholder="请输入网关地址" class="layui-input"> -->
                                        <div id="gatewayL"></div>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">DNS地址</label>
                                    <div class="layui-input-block">
                                        <!-- <input type="text" name="nameserver" lay-verify="title" autocomplete="off" placeholder="请DNS地址" class="layui-input"> -->
                                        <div id="nameserverL"></div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="saveSetting">保存设置</button>
                            <button type="reset" lay-event="reset" class="layui-btn layui-btn-primary">恢复默认</button>
                        </div>
                    </div>
                </form>
            </fieldset>
        </div>
    </div>
</div>
<script src="../js/lay-module/ipInput/ipInput.js"></script>
<script>
    layui.use(['form', 'util', 'jquery'], function() {
        var form = layui.form,
            util = layui.util,
            $ = layui.jquery;

        const isDisabledInput = (elem, bol) => {
            $(elem)[bol ? "attr" : "removeAttr"]("disabled", "disabled");
            // $.each($(elem).find("input.layui-input"), function(indes, item) {
            //     bol && $(item).removeAttr("lay-verify")
            // })
        };

        form.render();
        const ethernet0Input = {
            ip: [$('#ip').ipInput(), "请输入正确的IP地址"],
            netmask: [$('#netmask').ipInput(), "请输入正确的子网掩码"],
            gateway: [$('#gateway').ipInput(), "请输入正确的网关地址"],
            nameserver: [$('#nameserver').ipInput(), ""],
        };
        const ethernet1Input = {
            ip: [$('#ipL').ipInput(), "请输入正确的IP地址"],
            netmask: [$('#netmaskL').ipInput(), "请输入正确的子网掩码"],
            gateway: [$('#gatewayL').ipInput(), "请输入正确的网关地址"],
            nameserver: [$('#nameserverL').ipInput(), ""],
        };
        form.on('submit(saveSetting)', function(data) {
            form.render();
            var d = data.field;
            var inputList = $(data.form).attr("value") === "ethernet0" ? ethernet0Input : ethernet1Input;
            for (key in inputList) {
                var v = inputList[key][0].getIp();
                if (!v && inputList[key][1]) {
                    return layer.msg(inputList[key][1], {
                        icon: 2,
                    });
                }
                d[key] = v
            };
            $($(data.form).find("textarea")).val(` ifconfig ${d.configopt} hw ether ${d.mac}\n ifconfig ${d.configopt} ${d.ip} netmask ${d.netmask}\n route add default gw ${d.gateway} ${d.configopt}`)
            delete d.configstr;
            $.ajax({
                url: '/xapi/ethernet',
                type: "post",
                data: {
                    ...d
                },
                success: function(data) {
                    if (data.code === 1) {
                        layer.msg(data.msg, {
                            icon: 1,
                        });
                    }
                },
            });
            return false;
        });
        util.event("lay-event", {
            reset: function(e) {
                isDisabledInput($($(e).parents("form")).find("fieldset"), false);
            }
        });

        form.on('radio(interest)', function(data) {
            var elem = "";
            if (data.value === "1") {
                elem = $(data.elem).siblings("fieldset");
                $(elem).val("")
            }
            if (data.value === "2") {
                elem = $(data.elem).parents("fieldset");
            }
            isDisabledInput(elem, data.value === "1");
        });

        form.verify({
            mac: [
                /[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}/,
                "请输入正确的MAC地址"
            ]
        });

    })
</script>